<template>
    <div class="page-container">
        <div class="search-form-wrapper">
            <el-form :inline="true" :model="newsForm" class="demo-form-inline">
                <el-form-item style="width: 180px;">
                    <el-input v-model="newsForm.title" placeholder="请输入新闻标题" clearable class="custom-input" />
                </el-form-item>
                <el-form-item style="width: 180px;">
                    <el-input v-model="newsForm.content" placeholder="请输入新闻内容" clearable class="custom-input" />
                </el-form-item>
                <el-form-item style="width: 180px;">
                    <el-input v-model="newsForm.username" placeholder="请输入作者名字" clearable class="custom-input" />
                </el-form-item>
                <el-form-item style="width: 180px;">
                    <el-button type="primary" @click="findAll(1)" class="custom-btn">查询</el-button>
                    <el-button @click="resetForm()" class="custom-btn">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="news-list-container">
            <div v-for="(item, index) in newsPage.news" :key="item.newsid || index" class="news-card"
                @click="showNewsDetail(item)">
                <h1 class="news-title">{{ item.title }}</h1>
                <div class="news-info">
                    <span class="news-publisher">发布者：{{ item.username }}</span>
                    <span class="news-time">{{ formatTime(item.createtime) }}</span>
                </div>
                <div class="news-content" v-html="item.content"></div>
                <el-divider class="custom-divider">
                    <el-icon>
                        <StarFilled />
                    </el-icon>
                </el-divider>
            </div>
            <!-- 无数据提示 -->
            <div v-if="newsPage.news.length === 0" class="no-data">
                暂无新闻数据
            </div>
        </div>
        <div class="pagination-wrapper">
            <el-pagination background layout="prev, pager, next" v-model:page-size="newsForm.pageSize"
                v-model:current-page="newsForm.pageNum" :total="newsForm.total" @current-change="findAll"
                class="custom-pagination" />
        </div>
    </div>
    <!-- 新闻详情对话框 -->
    <el-dialog v-model="dialogVisible" title="新闻详情" width="50%" :before-close="handleClose" class="custom-dialog">
        <div class="dialog-content">
            <h3 class="dialog-title">{{ currentNews.title }}</h3>
            <div class="dialog-info">
                <span class="dialog-publisher">发布者：{{ currentNews.username }}</span>
                <span class="dialog-time">{{ formatTime(currentNews.createtime) }}</span>
            </div>
            <div class="dialog-news-content" v-html="currentNews.content"></div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" class="dialog-close-btn">关闭</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { StarFilled } from '@element-plus/icons-vue'
import request from '@/utils/request'

// 重置查询条件
const resetForm = () => {
    newsForm.value.title = ''
    newsForm.value.content = ''
    newsForm.value.username = ''
}

// 新闻查询条件
const newsForm = ref({
    pageNum: 1,
    pageSize: 4,
    total: 0,
    title: '',
    content: '',
    username: ''
})

// 新闻列表数据
const newsPage = ref({
    news: []
})

// 格式化时间
const formatTime = (time) => {
    if (!time) return ''
    const date = new Date(time)
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    }).replace(',', '')
}

// 对话框相关
const dialogVisible = ref(false)
const currentNews = ref({})

// 显示新闻详情对话框
const showNewsDetail = (news) => {
    currentNews.value = news
    dialogVisible.value = true
}

// 对话框关闭时的回调
const handleClose = (done) => {
    done()
}

// 根据条件查询信息
const findAll = async (currentpage) => {
    newsForm.value.pageNum = currentpage
    try {
        let res = await request.post('/news/queryCondition', newsForm.value)
        if (res.data.success) {
            newsPage.value.news = res.data.data.list || []
            newsForm.value.pageNum = res.data.data.pageNum
            newsForm.value.pageSize = res.data.data.pageSize
            newsForm.value.total = res.data.data.total
        }
    } catch (error) {
        console.error('查询新闻失败:', error)
    }
}

onMounted(() => {
    findAll(1)
})
</script>

<style scoped>
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9fafb;
}

.search-form-wrapper {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.custom-input {
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    transition: all 0.3s ease;
}

.custom-input:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.custom-btn {
    border-radius: 4px;
    margin-right: 8px;
    transition: all 0.3s ease;
}

.custom-btn:hover {
    opacity: 0.8;
}

.news-list-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.news-card {
    padding: 20px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: all 0.3s ease;
}

.news-card:hover {
    background-color: #f5f7fa;
    transform: translateY(-2px);
}

.news-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
    font-weight: 600;
}

.news-info {
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
}

.news-publisher {
    font-weight: 500;
}

.news-time {
    color: #999;
}

.news-content {
    line-height: 1.8;
    color: #444;
    margin-bottom: 10px;
}

.custom-divider {
    margin: 15px 0;
}

.no-data {
    text-align: center;
    padding: 50px 0;
    color: #999;
    font-size: 16px;
}

.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.custom-pagination {
    border-radius: 4px;
}

.custom-dialog {
    border-radius: 8px;
    overflow: hidden;
}

.dialog-content {
    padding: 20px;
}

.dialog-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.dialog-info {
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
}

.dialog-publisher {
    font-weight: 500;
}

.dialog-time {
    color: #999;
}

.dialog-news-content {
    line-height: 1.8;
    color: #333;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
}

.dialog-close-btn {
    border-radius: 4px;
    transition: all 0.3s ease;
}

.dialog-close-btn:hover {
    opacity: 0.8;
}
</style>
